<!-- ModelLayer.vue -->
<template>
    <div class="layer">
        <div v-for="(arg, index) in data.layer_args" :key="index" class="propety-entry">
            <div class="property-key">{{ typeof arg === 'object' ? Object.keys(arg)[0] : '' }}</div>
            <div class="property-value">{{ typeof arg === 'object' ? JSON.stringify(Object.values(arg)[0]) : arg }}
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps(['data']);
</script>

<style scoped>
.layer {
    margin: 5px 5px 5px 25px;
    border-left: 1px dashed #ddd;
    padding-left: 10px;
    min-width: 200px;
}

.layer-name {
    margin: 5px;
}

.propety-entry {
    display: flex;
    justify-content: space-between;
    min-width: 200px;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px dashed #ddd;
    margin: 2px;
}

.propety-entry:hover {
    background-color: #fcfbf8;
}
</style>
